<template>
	<view class="shenye-paradise">
		<view class="location_box">
			<view class="l_box_l">
				<image class="location_icon" src="@/static/sy/location_icon.png" mode=""></image>
				<view class="location_txt ellipseHide">{{address}}</view>
			</view>
			<image class="reposition_img" src="@/static/sy/reposition.png" mode=""
				@click="openLocation">
			</image>
		</view>
		<view class="search_box">
			<image src="/static/index/search.png" mode="widthFix"></image>
			<input type="text" placeholder="搜索店铺" placeholder-class="placeholder_class">
		</view>
		<view class="swiper_box">
			<swiper class="swiper" indicator-color='#B5B5B5' indicator-active-color='#F9F9F9' :indicator-dots='true'>
				<swiper-item>
					<image src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/56b02aaf11234240a7b5789688b87199.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/56b02aaf11234240a7b5789688b87199.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="line"></view>
		<view class="list_box">
			<view class="list_item" v-for="(item,index) in shopList" :key="index" @click="jump(index,item)">
				 <view class="list_item_jackpot" >
					 <image src="/static/index/jackpot.png" mode="widthFix"></image>
				 </view>
				<view class="list_item_t">
					<image class="item_t_img" src="https://kayouyou-1257308601.cos.ap-guangzhou.myqcloud.com/f58f87ed737c459b932f3f2cb30a247b.png" mode="aspectFill"></image>
					<view class="item_t_r">
						<view class="itr_one">
							<!-- <view class="itr_one_label">餐饮</view> -->
							<!-- <view class="itr_one_label itr_vx">旅行</view> -->
							<view class="itr_one_label itr_yl">娱乐</view>
							<view class="itr_one_title ellipseHide">百年谭鸭血-鸭血</view>
							<view class="itr_one_kilometre">1km</view>
						</view>
						<view class="itr_two">
							<image class="itr_two_img" src="/static/index/time.png" ></image>
							<text class="itr_two_text">周一至周日  10:30-21:30</text>
						</view>
						<view class="itr_two">
							<image class="itr_two_img" src="/static/index/address.png" ></image>
							<text class="itr_two_text ellipseHide">海口市龙华区126号世贸大厦一楼商海口市龙华区126号世贸大厦一楼商</text>
						</view>
						<view class="itr_two itr_two_last">
							<image class="itr_two_img" src="/static/index/tel.png" ></image>
							<text class="itr_two_text">13989568596</text>
						</view>
					</view>
				</view>
				<view class="li_line"></view>
				<view class="list_item_b">
					<text class="lib_one">勋章加成：+61%</text>
					<text class="lib_line"></text>
					<text class="lib_two">消费100元预计收益61CoCo</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { activityShopList } from '@/api/sy.js'
	import jweixin from '@/components/jweixin-module/jsdk'
	import wechat from '@/components/jweixin-module/wechat'
	var QQMapWX = require('@/components/jweixin-module/jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				isToken: '', //判定是否登录
				latitude: '', //纬度
				longitude: '', //经度
				address: '', //地址
				shopList: [], //店铺列表
				listTotal: 0, //总数
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
			}
		},
		onLoad() {
			qqmapsdk = new QQMapWX({
				key: 'VXOBZ-MNYL4-UXRUV-XVTEP-IE2OS-NTBUW', //腾讯地图key
				vm: this
			});
			setTimeout(() => {
				this.getLocation()
			}, 500)
			this.isToken = (this.$queue.getData('token') != undefined && this.$queue.getData('token') != '') ? true : false
		},
		methods: {
			// 跳转神椰乐园详情
			jump(index,item){
				uni.navigateTo({
					url:'/pages/index/shenye-paradise/paradise-details/paradise-details'
				})
			},
			async getShopList() { //查询店铺列表
				console.log('店铺请求')
				uni.showLoading({
					title: '加载中'
				})
				let data = {
					lat: this.latitude,
					lnt: this.longitude,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				try {
					const res = await activityShopList(data)
					this.listTotal = res.result.total
					this.shopList = res.result.records
					uni.hideLoading()
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			getLocation() {
				let that = this
				uni.showLoading({
					title: '获取定位中',
					mask: true
				})
				jweixin.getLocation({
					type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
					success: function(res) {
						console.log('res+++++', res);
						that.latitude = res.latitude
						that.longitude = res.longitude
						uni.hideLoading()
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude,
							},
							success: function(res) {
								that.address = res.result.address
								// that.propShow = true
								console.log('地址：' + that.address + '、' + '定位区域编码：' + res.result
									.ad_info.adcode, res.result)
								that.getShopList()
							},
							fail(res) {
								console.log('失败++++', res)
								// this.getGovAreaList()
								that.getShopList()
								uni.showToast({
									icon: "none",
									title: '注意：需要获取您的定位授权,否则部分功能将无法使用',
									duration: 2000
								})
							}
						})
						uni.hideLoading()
					},
					cancel: function() {
						uni.hideLoading()
						that.getShopList()
					},
					fail: function(res) {
						uni.hideLoading()
						that.getShopList()
						uni.showToast({
							title: '定位失败，请重新定位',
							icon: 'none'
						})
						if (that.address == '') { //解决苹果手机获取wxjsdk要重新刷新才能获取定位问题
							// window.location.href =  "https://pay.frp.yedaoyun.com/pages/sy/sy"
						}
					},
				});
				setTimeout(res => {
					uni.hideLoading()
				}, 4000)
			},
			openLocation() { //重新定位
				let that = this
				console.log(that.latitude, that.longitude)
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						console.log(res)
						const latitude = that.latitude;
						const longitude = that.longitude;
						uni.chooseLocation({
							success: function(res) {
								// console.log('位置名称：' + res.name);
								// console.log('详细地址：' + res.address);
								// console.log('纬度：' + res.latitude);
								// console.log('经度：' + res.longitude);
								that.address = res.address
								that.latitude = res.latitude
								that.longitude = res.longitude
								that.pageNum = 1
								that.getShopList()
							}
						});
					}
				});
			},
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getShopList()
			}
		}
	}
</script>

<style scoped>
	.shenye-paradise{
		padding-top: 18rpx;
		padding-bottom: 80rpx;
	}
	.location_box {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx;
		/* margin-top: 18rpx; */
		margin-bottom: 30rpx;
	}
	.l_box_l{
		display: flex;
		align-items: center;
	}
	.location_icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}
	
	.location_txt {
		font-size: 30rpx;
		color: #222222;
		width: 490rpx;
	}
	.reposition_img {
		width: 134rpx;
		height: 52rpx;
	}
	
	/*  */
	.search_box{
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		height: 68rpx;
		background: #F6F6F6;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
	}
	.search_box image{
		width: 36rpx;
		height: 36rpx;
		margin-top: 4rpx;
		margin-right: 18rpx;
	}
	.search_box input{
		flex: 1;
		box-sizing: border-box;
		padding-right: 10rpx;
		display: flex;
		align-items: center;
	}
	.search_box .placeholder_class{
		color: #B4B4B4;
		font-size: 28rpx;
	}
	
	
	.swiper_box{
		width: 690rpx;
		height: 320rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
	}
	.swiper_box .swiper{
		width: 100%;
		height: 320rpx;
	}
	.swiper_box  image{
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}
	
	uni-swiper /deep/ .uni-swiper-dot {
		display: inline-block;
		cursor: pointer;
		width: 10rpx;
		height: 10rpx;
		-webkit-transition-property: background-color;
		transition-property: background-color;
		-webkit-transition-timing-function: ease;
		transition-timing-function: ease;
		border-radius: 40rpx !important
	}
	uni-swiper /deep/ .uni-swiper-dot-active {
		width: 20rpx !important;
		height: 8rpx !important;
		background-color: #F9F9F9 !important;
	
	}
	uni-swiper /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot{
		margin-right: 8rpx;
	}
	uni-swiper /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot:last-child{
		margin-right: 0;
	}
	
	/* end */
	.line{
		width: 100%;
		height: 20rpx;
		background: #F2F5F8;
	}
	
	/*  */
	.list_item{
		width: 710rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx #DBDBDB;
		border-radius: 24rpx;
		padding-top: 30rpx;
		box-sizing: border-box;
		position: relative;
		margin-top: 40rpx;
	}
	.list_item_jackpot{
		width: 120rpx;
		height: 46rpx;
		top: -10rpx;
		right: 0;
		position: absolute;
	}
	.list_item_jackpot image{
		width: 100%;
		height: 100%;
	}
	.list_item_t{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
	}
	.list_item_t .item_t_img{
		width:182rpx;
		height: 182rpx;
		border-radius: 16rpx;
		margin-right: 30rpx;
	}
	.itr_one{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 22rpx;
	}
	.itr_one_label{
		font-size: 24rpx;
		color: #FFFFFF;
		padding: 2rpx 16rpx;
		background: linear-gradient(105.48deg, #FFBE47 18.07%, #EE8306 100%);
		border: 1rpx solid #FFFFFF;
		border-radius: 8rpx;
		margin-right: 10rpx;
	}
	.itr_vx{
		background: linear-gradient(105.48deg, #A5B5FF 18.07%, #8D78FF 100%);
	}
	.itr_yl{
		background: linear-gradient(105.48deg, #46D3FF 18.07%, #0CD28B 100%);
	}
	.itr_one_title{
		flex: 1;
		font-size: 32rpx;
		color: #222222;
		font-weight: 600;
	}
	.itr_one_kilometre{
		font-size: 28rpx;
		color: #818181;
		margin-left: 10rpx;
	}
	.item_t_r{
		flex: 1;
		overflow: hidden;
	}
	.itr_two{
		display: flex;
		flex-direction: row;
		margin-bottom: 12rpx;
	}
	.itr_two .itr_two_img{
		width: 30rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}
	.itr_two_text{
		font-size: 24rpx;
		color: #9C9EA4;
		flex: 1;
	}
	.itr_two_last{
		margin-bottom: 0;
	}
	.li_line{
		box-sizing: border-box;
		width: 670rpx;
		height: 0px;
		margin: 0 auto;
		border-bottom: 2rpx solid #DEDEDE;
		margin-top: 30rpx;
	}
	.list_item_b{
		width: 100%;
		box-sizing: border-box;
		font-size: 28rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.lib_one{
		color: #FF3A3A;
	}
	.lib_line{
		width: 0;
		height: 40rpx;
		border-left: 2rpx solid #DEDEDE;
		margin: 0 22rpx;
	}
	.lib_two{
		color: #444444;
	}
</style>
